
import SearchForm from '@/page/me/SearchForm'
import { Button, Table, Form , Input, Space} from 'antd';
import {useState,useEffect} from 'react'
import http from '@/utils/http'

export function MeTable(){
    const [searchParams,setSearchParams] = useState({})
    const [current,setCurrent] = useState(1)
    const [pageSize,setPageSize] = useState(10)
    const [total,setTotal] = useState(0)
    const query = (data)=>{
        // console.log(data)
        // searchParams = {...data}
        setSearchParams(data)
        setCurrent(1)
        // getData();
    }
    function pageSizeChange(current, size){
        // console.log('pageSizeChange',current, size)
    } 
    function pageChange(page, pageSize){

        console.log('pageChange',page, pageSize)
        setCurrent(page)
        setPageSize(pageSize)
        // getData();
    }
    const columns = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
        },
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '住址',
          dataIndex: 'address',
          key: 'address',
        },
        {
            title: 'Action',
            key: 'action',
            render: (_, record) => (
              <Space size="middle">
                <a>update</a>
                <Button danger type="text" >
                Delete
                </Button>
              </Space>
            ),
          },
      ];

      const pagination = {
        total,
        current,
        pageSize,
        pageSizeOptions: ['10', '20', '50'],
        showTotal: (total) => `共 ${total} 条`,
        onShowSizeChange: pageSizeChange,
        onChange: pageChange
      }

    const [dataSource,setDataSource] = useState([])
    const getData = ()=>{
        let params= {...searchParams,current,pageSize}
        console.log(params)
        http.get('/pyapi/getUsers',params).then(res=>{
            console.log(res)
            const {total,list} = res.data;
            setDataSource(list)
            setTotal(total)
        })
    }
    useEffect(()=>{
        getData();
    },[current,pageSize,searchParams])

    return(
        <div>
            <SearchForm query={query}></SearchForm>
            <div className='btn-wrap'>
            <Button>新增</Button>
            </div>
            <div>
                <Table rowKey="id" pagination={pagination}dataSource={dataSource} columns={columns} />;
            </div>
        </div>
    )
}

export default  MeTable